<template>
	<view class="pageBox">
		<!--pv-->
		
		<view class="headerBox">
			<view class="pvImage"></view>
			
			<view class="headerContent">
				<view class="headerNavbar">
					<text class="wlIcon-fanhui1 text-white" @click="goBack()"></text>
					<!-- <u-icon name="arrow-left" color="#ffffff" size="40" @click="goBack()"></u-icon> -->
					<view class="headerTitle">pv</view>
				</view>
				
				<view class="numBox">
					<view class="flex align-center justify-center">
						<view class="numTitle">报单PV:</view>
						<view class="numValue"> {{data.pv_bd || 0}}</view>
					</view>
				</view>
				
				<view class="numBox2">
					<view class="flex align-center justify-center margin-left">
						<view class="numTitle">零售PV:</view>
						<view class="numValue"> {{data.pv_ls || 0}}</view>
					</view>
				</view>
				
				<view class="numBox2">
					<view class="flex align-center justify-center margin-left">
						<view class="numTitle">店铺PV:</view>
						<view class="numValue"> {{data.pv_store || 0}}</view>
					</view>
				</view>
				
				<view class="numBox2">
					<view class="flex align-center justify-center margin-left">
						<view class="numTitle">总PV:</view>
						<view class="numValue"> {{data.pv_total || 0}}</view>
					</view>
				</view>
				
				<view class="numBox2">
					<view class="flex align-center justify-center margin-left">
						<view class="numTitle">考核PV:</view>
						<view class="numValue"> {{data.lspv || 0}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="title-box">
			<image src='/static/images/user-red.png' class="user-image"></image>
			<view class="record-title">pv记录</view>
		</view>
		
		
		<view class="list">
			<view class="list-item" v-for="(item, index) in dataList" :key="index">
				<view class="flex justify-between align-center">
					<view class="memo">{{item.memo || ''}}</view>
					<view class="value" v-if="item.val > 0">{{item.val || ''}}</view>
					<view class="value red" v-if="item.val < 0">{{item.val || ''}}</view>
				</view>
				
				<view class="time">{{item.createtime || ''}}</view>
			</view>
		</view>
		
		<!-- 更多 -->
		<uni-load-more :status="status" :content-text="contentText" />
		
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
			data:{},
			dataList:[
				// {
				// 	memo:'昵称',
				// 	wallet: 100,
				// 	createtime:'13284845555',
				// }
			],
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'noMore',//noMore loading
			contentText: {
				contentdown: '',
				contentrefresh: '正在加载...',
				contentnomore: ''
			}
		}
	},
	onLoad() {
		this.getData();
		this.getList();
	},
	onShow(){
		
	},
	// 触底加载更多
	onReachBottom() {
		if (this.currentPage < this.lastPage) {
			this.currentPage += 1;
			this.getList();
		}
	},
	methods: {
		goBack(){
			uni.navigateBack({
				delta:1
			})
		},
		getData(){
			let that = this;
			uni.request({
				url: '/user/wallet',
				data: {
				},
				success: res => {
					res = res.res
					if (res.code === 1) {
						that.data = res.data;
					}
				}
			});
		},
		// 钱包明细
		getList() {
			let that = this;
			this.status = 'loading';
			uni.request({
				url: '/user/pvlog',
				data: {
					page: this.current_page,
				},
				success: res => {
					res = res.res
					if (res.code === 1) {
						that.dataList = [...that.dataList, ...res.data.data];
						that.current_page = res.data.current_page; //当前页码
						that.last_page = res.data.last_page; //总页码
						that.status = 'more';
					}
				}
			});
		
		}
	}
}
</script>

<style>
page{
	background-color:  #ffffff !important;	
}
</style>

<style scoped lang="scss">
.headerBox{
	
	.pvImage{
		width: 750rpx;
		/*height: 328rpx;*/
		height: 530rpx;
		background: #9C3928;
	}	
	
	.headerContent{
		position: absolute;
		top:115rpx;
	}
	
	.headerNavbar{
		display: flex;
		padding-left: 33rpx;
	}
	
	.headerTitle{
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		padding-left: 292rpx;
	}
	
	.headerBody{
		width: 702rpx;
		height: 336rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 48rpx;
		margin-left: 24rpx;
		display: flex;
		justify-content: flex-start;
		padding: 31rpx 32rpx;
		flex-direction: column;
	}
	
	.numBox{
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		margin-left: 30rpx;
	}
	
	.numBox2{
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}
	
	.numValue{
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: 700;
		color: #FFFFFF;
	}
	
	.numTitle{
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: 700;
		color: #FFFFFF;
	}
}	


.title-box{
	display: flex;
	margin-top: 50rpx;
	margin-left: 30rpx;
	
	.user-image{
		width: 48rpx;
		height: 48rpx;
		margin-right: 24rpx;
	}
	
	.record-title{
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #9C3928;
		line-height: 42rpx;
	}
}	

.list{
	margin-top: 42rpx;
	padding: 0rpx 30rpx;
	
	.list-item{
		padding: 18rpx 0rpx;
		border-bottom: 2rpx solid #E6E6E6;
	}
	
	.memo{
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #333333;
		line-height: 40rpx;
	}
	
	.value{
		font-size: 34rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 700;
		color: #333333;
		line-height: 40rpx;
	}
	
	.time{
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #9A9A9A;
		line-height: 30rpx;
		margin-top: 10rpx;
	}
	
	.red{
		color:#9C3728 !important;
	}
}

</style>